<template>
  <div>
    <!-- 项目列表 -->
    <div class="tabNav">
      <router-link to="/index">
        <img :src="require('/src/assets/img/sidebar1.png')" />首页
      </router-link>
      <b class="colors"
        >/
        <!-- <img src="../assets/img/business.png" /> -->
        角色列表</b
      >
      <!-- <b><span class="fenge">/</span>项目列表</b> -->
    </div>
    <el-card class="cardTits" shadow="hover">
      <div class="subject-title subject-titles subject-titles123">
        <div class="query query-task">
          <div class="flex-box">
            <div class="query-input">
              <el-input
                placeholder="账号"
                v-model="searchVal"
              ></el-input>
            </div>
            <el-button class="query-btn" @click="getTaskList" type="primary">查询</el-button>
          </div>
          <el-button
            @click="addTaskModule = true"
            class="query-btn task-add"
            icon="el-icon-plus"
            >新建</el-button
          >
        </div>
      </div>
      <el-table
        :data="tableData"
        @selectionChange="downloadWhether"
        stripe
        style="width: 100%"
        ref="multipleTable"
        :row-key="getRowKeys"
        @sort-change="sortChange"
      >
        <el-table-column prop="roleId" sortable="custom" label="ID" width="120">
        </el-table-column>
        <el-table-column prop="roleName" sortable="custom" label="账号" width="">
        </el-table-column>
        <el-table-column prop="remark" sortable="custom" label="备注" width="">
        </el-table-column>
        <el-table-column prop="createTime" sortable="custom" label="创建时间">
          <template #default="item">
            {{ format("yyyy-MM-dd hh:mm:ss", new Date(item.row.createTime)) }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          class-name="editor"
          width="250"
        >
          <template #default="item">
            <el-button @click="updateEmployee(item.row)" type="text">编辑</el-button>
            <el-button @click="addEmployeeByRole(item.row)" type="text">员工管理</el-button>
            <el-button @click="addMenuByRole(item.row)" type="text">菜单管理</el-button>
            <el-button style="color:#f56c6c" @click="deleteRole(item.row)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-if="tableData.length > 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="arrPage"
        :page-size="selectPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 新建弹出层 -->
    <el-dialog title="新建账号" custom-class="task-margin task-margins" v-model="addTaskModule" @close="taskClose" width="600px">
      <div class="add-task add-tasks">
        <el-form
          :model="taskForm"
          :rules="rules"
          v-if="addTaskModule"
          ref="taskForm"
          label-width="150px"
          class="demo-ruleForm"
        >
          <el-form-item label="账号" prop="roleName">
            <el-input v-model="taskForm.roleName"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="taskForm.remark"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addTaskModule = false">取 消</el-button>
          <el-button type="primary" @click="addTaskMethods"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>

    <!-- 编辑弹出层 -->
    <el-dialog title="编辑账号" custom-class="task-margin task-margins" v-model="addTaskModules" @close="taskClose" width="600px">
      <div class="add-task add-tasks">
        <el-form
          :model="taskForm"
          :rules="rules"
          v-if="addTaskModules"
          ref="taskForm"
          label-width="150px"
          class="demo-ruleForm"
        >
          <el-form-item label="账号" prop="roleName">
            <el-input v-model="taskForm.roleName"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="taskForm.remark"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addTaskModules = false">取 消</el-button>
          <el-button type="primary" @click="addTaskMethods1"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>

    <!-- 菜单管理 -->
    <el-dialog title="菜单管理" custom-class="task-margin task-margins" v-model="addMenuByRoles" width="600px">
      <div class="add-task add-tasks">
        <el-form
          ref="taskForm"
          label-width="50px"
          class="demo-ruleForm"
        >
          <el-form-item prop="remark" class="addMenuByRoles">
            <el-cascader-panel
              v-model="addMenuByRoleValue"
              :options="items"
              style="height: 250px;"
              :props="{ value: 'id',label: 'title',children: 'children', multiple: true,emitPath:false}"
              collapse-tags
              @change="handleChange1"
              clearable></el-cascader-panel>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addMenuByRoles = false">取 消</el-button>
          <el-button type="primary" @click="addMenuByRole1"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>

    <!-- 员工管理 -->
    <el-dialog title="员工管理" custom-class="task-margin task-margins" v-model="addEmployeeByRoles" width="600px">
      <div class="add-task add-tasks">
        <el-form
          ref="taskForm"
          label-width="50px"
          class="demo-ruleForm"
        >
          <el-form-item prop="remark" class="addEmployeeByRoles">
            <el-cascader-panel
              v-model="addEmployeeByRoleValue"
              :options="tableDatas"
              style="height: 250px;"
              :props="{ value: 'id',label: 'username', multiple: true}"
              collapse-tags
              @change="handleChange2"
              clearable></el-cascader-panel>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addEmployeeByRoles = false">取 消</el-button>
          <el-button type="primary" @click="addEmployeeByRole1"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "ListTask",
  data() {
    return {
      getRowKeys(row) {
        // 获取row的key值
        return row.id;
      },
      infos: JSON.parse(localStorage.getItem("linggong_info")),
      addEmployeeByRoles: false,
      addMenuByRoles: false,
      orderByZH: false,
      orderByAsc: false,
      orderByColume: 'createTime',
      mubanflag: false,
      mubanArr: [],
      mubanUrl: "",
      searchVal: "", // 查询条件
      searchVal1: "", // 查询条件
      total: 1, // 总条数
      arrPage: [10, 20], // 每页条数
      selectPage: 10, // 每页选中条数
      currentPage: 1,
      selectValue: "",
      selectValue1: "",
      tableData: [],
      tableDatas: [],
      addTaskModule: false,
      addTaskModules: false,
      taskForm: {
        roleName: "", 
        remark: "", 
      },
      rules: {
        roleName: [
          { required: true, message: "请输入账号", trigger: "blur" },
        ],
      },
      fileList: [],
      checkedLsit: [],
      detailsTaskModule: false,
      taskDetailsObj: {},
      items: [],
      item1: [],
      menuAddRespByRoleList: [],
      employeeId: [],
      employeeIds: [],
      addMenuByRoleValue: [],
      addEmployeeByRoleValue: [],
      roleId: 0,
    };
  },
  components: {},

  mounted () { 
    let info = JSON.parse(localStorage.getItem("linggong_info"))
    this.platformName = info.platformName
    if(info.platformName.length >= 7 ){
      this.logoAuto = true;
    }
    for (let i = this.items.length -1; i >=0; i--) {  
      if (info.plateMode === 3) {
        if (this.items[i].hidden === 0 || this.items[i].hidden === 1  || this.items[i].hidden === 3) this.items.splice(i, 1);  
      }else if (info.plateMode === 1) {
        if (this.items[i].hidden === 2 || this.items[i].hidden === 3) this.items.splice(i, 1);  
      } else  {
        if (this.items[i].hidden === 2 || this.items[i].hidden === 1) this.items.splice(i, 1);  
      }
    }  
  },
  created() {
    this.getTaskList()
  },
  methods: {
    handleChange1(value) {
      // this.getTreeData(value);
      this.addMenuByRoleValue = []
      this.addMenuByRoleValue = value
      console.log(this.addMenuByRoleValue);
    },
    handleChange2(roleValue) {
      this.employeeIds = []
      this.employeeIds = roleValue
    },
    handleCurrentChange(d) {
      // 分页切换回调
      this.currentPage = d
      this.getTaskList()
    },
    handleSizeChange(d) {
      // 分页切换每页条数回调
      this.selectPage = d
      this.getTaskList()
    },
    getTaskList() {
      // 获取列表信息
      this.$http({
        url: "/api/quick/platform/role/pages",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          roleName: this.searchVal,
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: "createTime", // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code == 0) {
          this.tableData = data.result.list
          this.total = data.result.total
        }
      });
    },
    sortChange(d) {
      // 监听排序
      if(d.prop == null) {
        // 默认排序方式
        this.orderByZH = false
        this.orderByAsc = false
        this.orderByColume = 'bi.createTime'
      }else {
        let orderByZH = false
        if(d.prop == "name") {
          orderByZH = true
        }
        this.currentPage = 1
        this.selectPage = 10
        let orderByAsc = d.order == "descending" ? false : true
        this.orderByZH = orderByZH
        this.orderByAsc = orderByAsc
        this.orderByColume = d.prop
      }
      this.getTaskList()
    },
    updateEmployee(row) {
      // 项目编辑
      this.taskForm.roleName = row.roleName
      this.taskForm.remark = row.remark
      this.taskForm.roleId = row.roleId
      this.addTaskModules = true
    },
    xlsxFilelist(file) {
      this.fileList = [file]
    },
    deleteXlsxfile() {
      this.fileList = []
    },
    addTaskMethods() {
      // 添加角色
      this.$refs.taskForm.validate((valid) => {
        if (valid) {
          this.$http({
            url: "/api/quick/platform/role/add",
            method: "post",
            headers: {
              "Content-Type": "application/json",
            },
            data: this.taskForm
          }).then((data) => {
            if (data.code == 0) {
              if(data.result == null || data.result.data.length == 0) {
                this.addTaskModule = false
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  offset: 60
                })
                this.taskForm = {
                  roleName: "", 
                  remark: "", 
                }
                this.getTaskList()
              }else {
                this.$message({
                  message: '操作失败！',
                  type: 'error',
                  offset: 60
                })
                this.mubanArr = data.result.data
                this.mubanflag = true
                this.mubanUrl = data.result.url
              }
            }
          });
          this.addTaskModule = false
          this.$message({
            message: '操作成功',
            type: 'success',
            offset: 60
          })
          location.reload()
        } else {
          return false;
        }
      });
    },
    addTaskMethods1() {
      // 修改角色
      this.$http({
        url: "/api/quick/platform/role/update",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: this.taskForm,
      }).then((data) => {
        if (data.code == 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            offset: 60
          })
          this.addTaskModules = false
          this.getTaskList()
          this.taskForm = {
            roleName: "", 
            remark: "", 
          }
        }
      });
    },
    taskClose() {
      // 关闭新建项目清除数据
      this.mubanUrl = ""
      this.mubanflag = false
      this.addMenuByRoles = false
      this.mubanArr = []
      this.taskForm = {
        roleName: "", 
        remark: "", 
        id:"",
      }
    },
    addEmployeeByRole(row) {
      this.roleId = row.roleId
      this.addEmployeeByRoles = true
      this.addEmployeeByRoleValue = []
      // 查询角色下所有员工
      this.$http({
        url: "/api/quick/platform/role/employeeListbyRole",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          roleId: this.roleId,
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: "createTime", // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code == 0) {
          this.tableDatas = data.result
          for (let i = 0; i < this.tableDatas.length; i++) {
            if (this.tableDatas[i].belongRole) {
              this.addEmployeeByRoleValue[i] = this.tableDatas[i].id
            }
          }
        }
      });
    },
    addEmployeeByRole1(){
    // 给角色添加单个员工
      for (let i = 0; i < this.employeeIds.length; i++) {
        this.employeeId[i] = this.employeeIds[i][0]
      }
      this.employeeId = Array.from(new Set(this.employeeId));
      this.$http({
        url: "/api/quick/platform/role/addEmployeeByRole",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          employeeIds: this.employeeId,
          roleId: this.roleId,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: "createTime", // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code == 0) {
          this.addEmployeeByRoles = false
          this.$message.success("操作成功！")
          this.getTaskList()
        }
      });
    },
    addMenuByRole(row) {
      this.roleId = row.roleId
      // 查询角色下所有菜单
      this.addMenuByRoles = true
      this.$http({
        url: "/api/quick/platform/role/menuListbyRole",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          roleId: this.roleId,
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: "createTime", // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code == 0) {
          this.menuAddRespByRoleList = data.result
          for (let j = 0; j < this.menuAddRespByRoleList.length; j++) {
            delete this.menuAddRespByRoleList[j].belongRole
            delete this.menuAddRespByRoleList[j].hidden
            delete this.menuAddRespByRoleList[j].indexCode
            delete this.menuAddRespByRoleList[j].imgHOver
            delete this.menuAddRespByRoleList[j].title
            delete this.menuAddRespByRoleList[j].id
            delete this.menuAddRespByRoleList[j].img
            this.menuAddRespByRoleList = JSON.parse(JSON.stringify(this.menuAddRespByRoleList).replace(/"children"/g,'"childrenIds"'))
            if (this.menuAddRespByRoleList[j].childrenIds !== null) {
              for (let k = 0; k < this.menuAddRespByRoleList[j].childrenIds.length; k++) {
                delete this.menuAddRespByRoleList[j].childrenIds[k].id
                delete this.menuAddRespByRoleList[j].childrenIds[k].indexCode
                delete this.menuAddRespByRoleList[j].childrenIds[k].title
              }
            }
          }
        }
      });
      this.$http({
        url: "/api/quick/platform/role/menuListbyRole",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          roleId: this.roleId,
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: "createTime", // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code == 0) {
          this.items = data.result
          this.item1 = data.result
        }
      });
    },
    addMenuByRole1(){
      // 添加角色下菜单
      for (let i = 0; i < this.addMenuByRoleValue.length; i++) {
        for (let j = 0; j < this.items.length; j++) {
          if (this.items[j].children !== null) {
            for (let k = 0; k < this.items[j].children.length; k++) {
              if (this.items[j].children[k].id == this.addMenuByRoleValue[i]) {
                this.menuAddRespByRoleList[j].id = this.items[j].id
                this.menuAddRespByRoleList[j].childrenIds[k] = this.items[j].children[k].id
                break;
              }
            }
          }else {
            this.menuAddRespByRoleList[j].id = this.items[j].id
          }
        }
      }
      let menuAddRespByRoleLists = []
      for (let h = 0; h < this.menuAddRespByRoleList.length; h++) {
        if (this.menuAddRespByRoleList[h].childrenIds !== null) {
          console.log(this.menuAddRespByRoleList[h].id)
          // for (let l = 0; l < this.menuAddRespByRoleList[h].childrenIds.length; l++) {
            if (this.menuAddRespByRoleList[h].id) {
              menuAddRespByRoleLists.push(this.menuAddRespByRoleList[h])
              break;
            }
          // }
        }else {
          if (this.menuAddRespByRoleList[h].id) {
            menuAddRespByRoleLists.push(this.menuAddRespByRoleList[h])
            break;
          }
        }
      }
      console.log(this.menuAddRespByRoleList)
      // console.log(menuAddRespByRoleLists)
      this.$http({
        url: "/api/quick/platform/role/addMenuByRole",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          menuAddRespByRoleList: menuAddRespByRoleLists,
          roleId: this.roleId,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: "createTime", // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code == 0) {
          this.addMenuByRoles = false
          this.$message.success("操作成功！")
          this.getTaskList()
        }
      });
    },
    deleteRole(row){
      this.$confirm('确定要删除角色吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'task-messages',
        type: 'warning'
      }).then(() => {
      // 删除角色
      this.$http({
        url: "/api/quick/platform/role/delete",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          roleId: row.roleId,
        },
      }).then((data) => {
        if (data.code == 0) {
          this.$message.success("操作成功！")
          this.getTaskList()
        }
      });
      }).catch(() => {
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.el-input--prefix .el-input__inner {
    padding-left: 30px !important;
}
.query-task {
  justify-content: space-between;
  .flex-box {
    display: flex;
  }
  .task-add {
    margin-right: 20px;
    & :deep(span),
    & :deep(i) {
      color: #ffffff;
    }
  }
}
.add-task {
  padding-right: 50px;
  & :deep(.el-form-item) {
    .el-date-editor--date {
      .el-input__inner {
        padding: 0 30px;
      }
    }
  }
  & :deep(.el-upload--text) {
    width: auto;
    height: auto;
    border: 0;
    display: block;
    text-align: left;
  }
  & :deep(.el-button--small) {
    color: #326CF0;
    border-color: #326CF0;
  }
}

.details-task {
  .task-content {
    color: #0A2E6A;
  }
  & :deep(.el-form-item) {
    .el-form-item__label,
    .el-form-item__content {
      line-height: 22px;
    }
  }
}
.task-message {
  width: 260px;
  text-align: left;
  .el-button--primary {
    background-color: #326CF0;
    color: #ffffff;
  }
}
.task-messages {
  width: 400px;
  text-align: left;
  .el-button--primary {
    background-color: #326CF0;
    color: #ffffff;
  }
}
.query-plain {
  float: right;
  margin-top: 3px;
}
.el-form-item__content .upload-renyuanbiao {
  float: left;
  margin-left: 0;
  width: auto !important;
}
.cardTits.renwu-error {
  margin-left: 152px;
  margin-bottom: 20px;
  .renwu-title {
    margin-bottom: 10px;
  }
  .el-table {
    th {
      height: 40px;
    }
  }
  .renwu-dwoload {
    color: #326CF0;
    margin-top: 10px;
    font-size: 12px;
    display: inline-block;
    cursor: pointer;
  }
  .renwu-dwoload:hover {
    text-decoration: underline;
  }
}
.task-margin {
  margin-bottom: 100px;
}
</style>
<style lang="scss">
.addMenuByRoles {
  .el-cascader-menu {
    min-width: 230px;
  }
  .el-cascader-menu__wrap {
    height: auto;
  }
}
.addEmployeeByRoles {
  .el-cascader-menu {
    min-width: 460px;
  }
  .el-cascader-menu__wrap {
    height: auto;
  }
}
.task-margins {
  .el-select {
    width: 360px;
}
}
.subject-titles .query .query-input .el-input .el-input__inner {
    height: 32px;
    font-size: 12px;
    border-color: #eff4fa;
}
.subject-titles {
  margin: 21px 0 16px 20px;

  // 查询
  .query {
    display: flex;
    align-items: center;
    margin-bottom: 23px;

    .query-input {
      width:260px;
      margin-right: 10px;

      .el-input {
        line-height: 32px;

        .el-input__inner {
          height: 32px;
          font-size: 12px;
          border-color: #EFF4FA;
        }
      }
    }

    .query-select {
      width: 260px;
      margin-right: 10px;

      .el-input {
        line-height: 32px;

        .el-input__inner {
          height: 32px;
          font-size: 12px;
          border-color: #EFF4FA;
        }

        .el-input__icon {
          line-height: 32px;
        }
      }
    }

    .query-btn {
      min-width: 60px;
      padding: 0 10px;
      height: 32px;
      min-height: 32px;
      background-color: #326CF0;
      border-color: #326CF0;
      font-size: 12px;
      font-weight: normal;
    }
  }

  // 表格头部下载
  .download {
    font-size: 12px;

    span {
      color: #326CF0;
      border: 1px solid #326CF0;
      padding: 4px 5px;
      border-radius: 5px;
      background: #FFFFFF !important;
      margin-right: 10px;
      cursor: pointer;
      display: inline-block;
      min-width: 50px;
      text-align: center;
    }
  }

}
.add-tasks {
  .el-textarea__inner {
    height: 100px;
  }
}
.subject-titles123 {
  .el-select {
    width: 260px;
  }
}
</style>